<template>
  <div class="container_personalpage">
    <!-- top -->
    <div class="container">
      <!-- right -->
      <el-row :span="10">
        <el-col>
          <div class="person_card">

            <!-- 用户头像 -->
            <div class="user">
              <img src="./images/1.jpg" class="Avatar" alt="">
            </div>
            <!-- name -->
            <div class="name">
              <span class="name_container">
                <div class="account_text">1786061_fEiw</div>
                <div class="level_box medium">
                  <i class="lv">lv1</i>
                </div>
              </span>
            </div>
            <!-- 下拉菜单 -->
            <el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
              <el-sub-menu index="2">
                <template #title>管理我的主页</template>
                <el-menu-item index="2-1">编辑资料</el-menu-item>
                <el-menu-item index="2-2">编辑轮播图</el-menu-item>
                <el-menu-item index="2-3">编辑简介</el-menu-item>
                <el-menu-item index="2-3">资源动态管理</el-menu-item>
                <el-menu-item index="2-3">商品管理</el-menu-item>
              </el-sub-menu>
            </el-menu>

            <!-- <div class="action-box center self">
              <div class="drop_menu el-dropdown">
                <div class="el-dropdown-link el-dropdown-selfdefine" haspopup="list " role="button" aria-controls="dropdown-menu-2781">
                  <div>编辑资料</div>
                </div>
              </div>
            </div> -->

            <!-- 简介 -->
            <span class="summary">
              <div class="text">暂无简介</div>
            </span>
          </div>

          <!-- 关注和粉丝 -->
          <div class="tag">
            <div class="left">
              <div class="bottom">0</div>
              <div>关注</div>
            </div>
            <div class="left">
              <div class="bottom">0</div>
              <div>关注</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <!-- left -->
      <div class="images_list">
        <div class="default_container">
          <img src="./images/1.jpg" class="carousel-item blur" alt="">
        </div>
      </div>
    </div>
    <div>
    </div>

    <!-- bottom -->
    <div class="channel_list">
      <div class="list content-width">
        <span class="channel_item active">资源动态</span>
        <span class="channel_item">商品服务</span>
      </div>
    </div>
    <!-- none-tip -->
    <div class="none-tip">
      <div class="no_more_content">
        <img src="./images/no_content@3x.0fd78ad2.png" class="img" alt="">
        <span class="text">无更多数据</span>
      </div>

    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const activeIndex = ref('1')

const handleSelect = (key: string, keyPath: string[]) => {
  console.log(key, keyPath)
}
</script>

<style lang="less" scoped>
.container_personalpage {
  width: 1349px;
  height: 1215px;
  background-color: #f5f7f9;
  box-sizing: border-box;
  margin: 0;

  /* top */
  .container {
    width: 1200px;
    height: 426px;
    display: flex;
    flex-direction: row;
    margin: 20px 70px;

    /* left */
    .person_card {
      box-sizing: border-box;
      padding-top: 22px;
      padding-bottom: 34px;
      background: #fff;
      width: 334px;
      border-radius: 4px;
      display: flex;
      flex-direction: column;

      .Avatar {
        width: 100px;
        height: 100px;
        margin: 0 112px;
        background-repeat: no-repeat;
        background-position: 50%;
        background-size: cover;
        background: url(https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1);
        border-radius: 50%;
        background-color: #ccc;
      }

      /* name */
      .name {
        height: 46px;
        text-align: center;

        .name_container {
          margin: 15px 0;
          font-size: 16px;
          line-height: 20px;
          padding: 4px 0 10px 0;
          font-family: MicrosoftYaHei;
          color: #111;
          word-break: break-all;
          display: flex;
          justify-content: center;

          .account_text {
            font-size: 16px;
            color: #111;
            word-break: break-all;
          }

          .level_box {
            border: 1px solid #fff;
            padding: 0 8px;
            cursor: pointer;
          }

        }
      }

      /* 暂无简介 */
      .summary {
        width: 272px;
        height: 60px;
        font-size: 16px;
        color: #7d8090;
        line-height: 33px;
        margin: 16px 31px 0 31px;

        .text {
          margin-left: 20px;
        }
      }

    }
    .tag {
        background: #fff;
        margin-top: 20px;
        box-sizing: border-box;
        width: 334px;
        height: 80px;
        border-radius: 4px;
        padding-top: 16px;

        .left {
          float: left;
          width: 164px;
          height: 44px;
          text-align: center;

          .bottom {
            margin-bottom: 10px;
          }
        }

        .left+.left {
          border-left: 1px solid #ccc;
        }
      }
  }

  // bottom
  .channel_list {
    height: 50px;
    color: #7d8090;
    font-size: 16px;
    display: flex;
    justify-content: center;

    .channel_item {
      vertical-align: middle;
      line-height: 50px;
      color: #7d8090;
      padding: 10px;

      &.active {
        border-bottom: #111 2px solid;
      }
    }

    .channel_item+.channel_item {
      margin-left: 20px;
    }
  }

  // none-tip
  .none-tip {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    min-height: 600px;

    .no_more_content {
      display: flex;
      flex-direction: column;
      padding: 20px;

      .text {
        display: block;
        margin: 20px auto 40px;
        color: rgb(177, 181, 193);
      }
    }
  }
}


/* 管理我的主页 */
.el-menu--horizontal {
  border-bottom: none;
  display: flex;
  justify-content: center;
  background-color: #fbe9f2;
  width: 300px;
  height: 40px;
  border-radius: 30px;
}
















/* right */
.container .images_list {
  width: 850px;
  height: 422px;
  margin-left: 16px;
  background: #fff;
  position: relative;
}

.container .images_list .default_container {
  border-radius: 4px;
  height: 100%;
  overflow: hidden;
}

.container .images_list .default_container .carousel-item {
  width: 100%;
  height: 100%;
  background: url(https://rs.dance365.com/default_head@3x.png?imageView2/0/w/200/h/1200/format/webp/ignore-error/1);
  box-sizing: border-box;
  background-position: 50%;
  background-size: cover;
  background-repeat: no-repeat;
}
</style>